<template>
  <div>
    <div class="j-brief">
      <router-link to="/society" tag="a">{{zannueBrief[0]}}</router-link>
      <router-link to="/school" tag="a" class="active">{{zannueBrief[1]}}</router-link>
    </div>
    <div class="title">
      <h1>{{zannueBrief[1]}}</h1>
    </div>
    <div class="lanmu">
      <h1>{{zannueBrief[2]}}</h1>
    </div>
    <div class="tb" style="width: 1200px;margin: 0 auto">
      <div class="tab-head">
        <p style="width: 287px">{{tabName1[0]}}</p>
        <p style="width: 161px">{{tabName1[1]}}</p>
        <p style="width: 187px">{{tabName1[2]}}</p>
        <p style="width: 217px">{{tabName1[3]}}</p>
        <p style="width: 348px">{{tabName1[4]}}</p>
      </div>
      <div>
        <el-table
          :data="tableData1"
          stripe
          style="width: 100%;" class="spHight">
          <el-table-column
            prop="post_title"
            label="宣讲院校"
            width="287"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="type"
            label="形式"
            width="161"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="start"
            label="日期"
            width="187"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="long"
            label="时间"
            width="217"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="area"
            label="地点"
            width="348"
            align="center"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="lanmu">
      <h1>{{zannueBrief[3]}}</h1>
    </div>
    <div style="width: 1200px;margin: 0 auto" class="tb">
      <div class="tab-head">
        <p style="width: 287px">{{tabName2[0]}}</p>
        <p style="width: 161px">{{tabName2[1]}}</p>
        <p style="width: 187px">{{tabName2[2]}}</p>
        <p style="width: 217px">{{tabName2[3]}}</p>
        <p style="width: 348px">{{tabName2[4]}}</p>
      </div>
      <div>
        <el-table
          :data="tableData2"
          stripe
          style="width: 100%">
          <el-table-column
            prop="post_title"
            label="形式"
            width="287"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="team"
            label="日期"
            width="161"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="num"
            label="时间"
            width="187"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="di"
            label="地点"
            width="217"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="time"
            label="地点"
            width="348"
            align="center"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="lanmu">
      <h1>{{zannueBrief[4]}}</h1>
      <div class="lc p-content">
        <p>1、{{zannueBrief[5]}}</p>
        <p>2、{{zannueBrief[6]}}</p>
        <span>{{zannueBrief[7]}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import vNav from '@/components/nav.vue'
import banner from '@/components/banner.vue'
import {mapGetters} from 'vuex'
import { getSchoolJobData } from '@/services/api.js'
export default {
  name: 'product',
  data () {
    return {
      navBrief: [],
      title: [],
      tableData1: [],
      tableData2: [],
      activeNames: ['1'],
      isVisibly: true
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'zannueBrief': 'zannueBrief',
      'tabName1': 'tabName1',
      'tabName2': 'tabName2'
    })
  },
  components: {
    vNav,
    banner
  },
  methods: {
    _getChList (sw, page) {
      this.lists = []
      getSchoolJobData().then((res) => {
        console.log(res)
        this.tableData1 = res.move
        this.tableData2 = res.job
      })
    },
    _getEnList () {
      this.lists = []
      this.tableData1 = []
      this.tableData2 = []
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isVisibly = true
      }
      if (this.lang === 2) {
        this._getEnList()
        this.isVisibly = false
      }
    }
  },
  watch: {
    lang (newVal, oldVal) {
      if (newVal === 1) {
        this._getChList()
        this.isVisibly = true
      }
      if (newVal === 2) {
        this._getEnList()
        this.isVisibly = false
      }
    }
  },
  created () {
    this.version()
    window.scrollTo(0, 0)
  }
}
</script>

<style scoped lang="scss">
  .active {
    color: #2154b9;
  }
  .active:hover {
    color: #fff!important;
  }
  .el-table tr {
    background-color: red
  }
  .title {
    width: 1200px;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 83px;
    h1 {
      font-size: 32px;
      line-height: 48px;
      letter-spacing: 3px;
      color: #333333;
    }
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .main-jiesao {
    padding: 30px;
    background-color: #ededed;
    div {
      margin-bottom: 30px
    }
  }
  .lc {
    height: 174px;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 68px;
    p, span {
      font-size: 14px;
      letter-spacing: 1px;
      color: #4d4d4d;
      line-height: 28px
    }
    span {
      margin-top: 20px
    }
  }
  .tb {
    position: relative;
    .tab-head {
      height: 47px;
      background-color: #2053b9;
      display: flex;
      position: absolute;
      width: 100%;
      z-index: 2;
      top: 0;
      p {
        font-size: 20px;
        letter-spacing: 2px;
        color: #fff;
        line-height: 47px;
        text-align: center
      }
    }
  }
  .spHight td {
    height: 60px
  }
  .el-table tr {
    height: 60px!important
  }
</style>
